<template>
    <div>
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>单机全局配置</span>
                <div style="float: right; padding: 3px 0" v-if="!isEdit">
                     <el-button type="primary" size="mini" @click="handleEdit">编辑</el-button>
                </div>
            </div>
            <div>
                <el-form :model="form" ref="form" label-width="170px" :disabled="!isEdit">
                  <el-form-item label="服务默认配置:" prop="serviceDefaultEnabled">
                       <el-checkbox v-model="form.serviceDefaultEnabled">启用</el-checkbox>
                  </el-form-item>
                 <el-form-item label="熔断策略：" required prop="degradeRule.strategy" label-width="260px" v-if="form.serviceDefaultEnabled">
                    <el-radio-group v-model="form.degradeRule.strategy">
                        <el-radio :label="1">异常比例</el-radio>
                        <el-radio :label="2">异常数</el-radio>
                    </el-radio-group>
                 </el-form-item>
                <el-form-item label="比例阀值：" required prop="degradeRule.ratioThreshold" v-if="form.degradeRule.strategy===1 && form.serviceDefaultEnabled" label-width="260px">
                    <el-input-number v-model="form.degradeRule.ratioThreshold" size="small" :min="0" :max="1" :step="0.1"></el-input-number>
                    <div class="tips">异常的请求比例阈值，超过该值触发熔断，默认值为0.5</div>
                </el-form-item>
                <el-form-item label="异常数：" required prop="degradeRule.exceptionCount" v-if="form.degradeRule.strategy===2 && form.serviceDefaultEnabled" label-width="260px">
                    <el-input-number v-model="form.degradeRule.exceptionCount" size="small" :min="1" :step="1"></el-input-number>
                    <div class="tips">异常的请求数，超过该值触发熔断，默认值为50</div>
                </el-form-item>
                <el-form-item label="最小请求数：" required prop="degradeRule.minRequestCount" label-width="260px" v-if="form.serviceDefaultEnabled">
                    <el-input-number v-model="form.degradeRule.minRequestCount" size="small" :min="1" :max="100000000000000000" :step="1"></el-input-number>
                    <div class="tips">请求数小于该值时即使异常请求超出阈值也不会熔断，默认值为100</div>
                </el-form-item>
                <el-form-item label="熔断时长：" required prop="degradeRule.timeWindow" label-width="260px" v-if="form.serviceDefaultEnabled">
                    <el-input-number v-model="form.degradeRule.timeWindow" size="small" :min="1" :max="100000000000000000" :step="1"></el-input-number>
                    <div class="tips">触发熔断后请求被熔断的时长，默认值为10</div>
                </el-form-item>
                <el-form-item label="统计时长：" required prop="degradeRule.statInterval" label-width="260px" v-if="form.serviceDefaultEnabled">
                    <el-input-number v-model="form.degradeRule.statInterval" size="small" :min="1" :max="100000000000000000" :step="1"></el-input-number>
                    <div class="tips">熔断的统计时长，默认值为10</div>
                </el-form-item>
                <el-form-item label="恢复策略：" required prop="degradeRule.recoveryStrategy" label-width="260px" v-if="form.serviceDefaultEnabled">
                    <el-radio-group v-model="form.degradeRule.recoveryStrategy">
                        <el-radio :label="1">尝试恢复
                            <el-tooltip class="item" effect="dark" content="熔断结束后放通一个请求进入，请求成功时恢复服务，请求失败则立即进入下一个熔断时长。" placement="bottom">
                            <i class="el-icon-question"></i>
                            </el-tooltip>
                        </el-radio>
                        <el-radio :label="2">逐步恢复
                            <el-tooltip placement="top">
                                <div slot="content">熔断结束后根据恢复时长按比例逐步放通请求，<br/>例如配置恢复时长5秒，则第1秒放通20%的请求，第2秒放通40%的请求,...，第5秒放通100%的请求。</div>
                                <i class="el-icon-question"></i>
                            </el-tooltip>
                        </el-radio>
                        <el-radio :label="3">立即恢复
                            <el-tooltip class="item" effect="dark" content="熔断结束后立即恢复服务，放通所有请求。" placement="bottom">
                            <i class="el-icon-question"></i>
                            </el-tooltip>
                        </el-radio>
                    </el-radio-group>
                </el-form-item> 
                <el-form-item label="恢复时长：" required prop="recoveryTimeWindow" v-if="form.degradeRule.recoveryStrategy===2 && form.serviceDefaultEnabled" label-width="260px">
                    <el-input-number v-model="form.degradeRule.recoveryTimeWindow" size="small" :min="5" :step="1"></el-input-number>秒
                    <div class="tips">熔断结束后的恢复时长，默认值为5</div>
                </el-form-item> 
                <el-form-item label="限流响应ContentType:" prop="responseContentType">
                    <el-input v-model="form.responseContentType" size="small"></el-input>
                </el-form-item>
                <el-form-item label="限流响应报文:" prop="responseContent">
                    <el-input type="textarea" :rows="4" v-model="form.responseContent" size="small"></el-input>
                </el-form-item>
                <el-form-item style="text-align: right" v-if="isEdit">
                    <el-button type="primary" @click="onSubmit" size="mini">提交</el-button>
                    <el-button size="mini" @click="handleCancel">取消</el-button>
                </el-form-item>
                </el-form>
            </div>
        </el-card>
    </div>
</template>

<script>
import {save,getRule} from '@/api/fuse/default.api'
    export default {
        data() {
            return {
                form: {
                    globalEnabled: false,
                    serviceDefaultEnabled: false,
                    appIdDefaultEnabled: false,
                     degradeRule: {
                        strategy: 1,
                        ratioThreshold: 0.5,
                        minRequestCount: 100,
                        timeWindow: 10,
                        statInterval: 10,
                        exceptionCount: 50,
                        recoveryTimeWindow: 5,
                    },
                },
                // 编辑
                isEdit: false
            } 
        },
        async mounted() {
          const result =  await getRule();
            if(result.code === 200) {
                this.form = result.data   
            }
        },
        methods: {
            handleEdit() {
                this.isEdit = true;
            },
            handleCancel() {
                this.isEdit = false;
            },
            async onSubmit() {
                const result = await save(this.form);
                if(result.code === 200) {
                    this.$message({
                        type: 'success',
                        message: '保存成功'
                    });
                    this.isEdit = false;
                }
            }
        }
    }   
</script>

<style lang="scss" scoped>
.tips {
    color: #999;
    font-size: 12px;
    line-height: normal;
    margin-top: 8px;
    display: block; 
}
</style>